{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <H4>File upload</H4>
         <input type="file" name="upload_file" id="uploadFile" multiple />

        <script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
        <script src="{% static 'js/cos-js-sdk-v5.min.js' %}"></script>
        
        <script>
            var cos;
            $(function () {
                initCOS();
                bindChangeFileInput();
            });

            function initCOS() {
                cos = new COS({
            //之前直接是secure id和key，现在是运行回调函数，这个回调函数发送get请求到credential
                    getAuthorization: function (options, callback) {
                        // 向django后台发送请求，获取临时凭证
    //等效$.ajax({type:’GET’})
                        $.get('/app01/cos/credential/', {
                            // 可从 options 取需要的参数
                        }, function (data) {
    //data是从视图函数拿到的凭证返回值 
                            var credentials = data && data.credentials;
                            if (!data || !credentials) return console.error('credentials invalid');
                            callback({
                                TmpSecretId: credentials.tmpSecretId,
                                TmpSecretKey: credentials.tmpSecretKey,
                                XCosSecurityToken: credentials.sessionToken,
                                StartTime: data.startTime,
                                ExpiredTime: data.expiredTime,
                            });
                        });
                    }
                });
            }

            function bindChangeFileInput() {
                $("#uploadFile").change(function () {
                    // 获取要上传的所有文件对象列表
                    var files = $(this)[0].files;
                    $.each(files, function (index, fileObject) {
                        var fileName = fileObject.name;
                        // 上传文件
                        cos.putObject({
                            Bucket: 'xiao-1253629186', /* 必须 */
                            Region: 'ap-beijing',     /* 存储桶所在地域，必须字段 */
                            Key: fileName,              /* 必须 */
                            StorageClass: 'STANDARD',
                            Body: fileObject, // 上传文件对象
                            onProgress: function (progressData) {
                                console.log("文件上传进度--->", fileName, JSON.stringify(progressData));
                            }
                        }, function (err, data) {
                            console.log(err || data);
                        });

                    })

                })
            }

        </script>
    </body>
</html>